import { reactive } from "vue";
import type { IData } from "../type";
import axios from "axios";
// 一，引入echarts插件以供使用
import * as echarts from 'echarts';
import chinaJson from "../assets/china.json";

type EchartsOption = echarts.EChartsOption

class InteData implements IData {
    areaTree: any[] = []
    chinaDayList: any[] = []
    chinaTotal: any
    china: any[] = []
    hbData: any
    mapType: number = 1
    lineType: number = 1
    lastUpdateTime: string = ''
    name: string = ''
    type: number = 1
}



const initDataFun = (
    nowDefiniteMap: echarts.EChartsType,
    totalDefiniteMap: echarts.EChartsType,
    newlyLineMap: echarts.EChartsType,
    confirmLineMap: echarts.EChartsType,
    healLineMap: echarts.EChartsType,
    data: InteData) => {

    let mapDom: HTMLElement | null = document.getElementById("map");
    let mapDom2: HTMLElement | null = document.getElementById("map2")
    let newlyLineDom: HTMLElement | null = document.getElementById("newly-line")
    let confirmLineDom: HTMLElement | null = document.getElementById("confirm-line")
    let healLineDom: HTMLElement | null = document.getElementById("heal-line")

    let optionMap1: EchartsOption = {
        title: {//标题内容
            // text: '中国疫情图',
            subtext: "单击省份可查看现有确诊病例数",
        },
        tooltip: {//提示框组件
            trigger: "item",//触发类型 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            formatter: "现有确诊病例<br/>{b}: {c} ",//提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            //  模板变量有 { a }, { b }，{ c }，{ d }，{ e }，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 { a0 }, { a1 }, { a2 } 这种后面加索引的方式表示系列的索引。 不同图表类型下的 { a }，{ b }，{ c }，{ d } 含义不一样。 其中变量{ a }, { b }, { c }, { d } 在不同图表类型下代表数据含义为：

            // 折线（区域）图、柱状（条形）图、K线图: { a }（系列名称），{ b }（类目值），{ c }（数值）, { d }（无）

            // 散点图（气泡）图: { a }（系列名称），{ b }（数据名称），{ c }（数值数组）, { d }（无）

            // 地图: { a }（系列名称），{ b }（区域名称），{ c }（合并数值）, { d }（无）

            // 饼图、仪表盘、漏斗图: { a }（系列名称），{ b }（数据项名称），{ c }（数值）, { d }（百分比）

        },
        visualMap: {
            show: false,
        },
    };

    let optionMap2: EchartsOption = {
        title: {//标题内容
            // text: '中国疫情图',
            subtext: "单击省份可查看累计确诊病例数",
        },
        tooltip: {//提示框组件
            trigger: "item",//触发类型 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            formatter: "累计确诊病例<br/>{b}: {c} ",//提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            //  模板变量有 { a }, { b }，{ c }，{ d }，{ e }，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 { a0 }, { a1 }, { a2 } 这种后面加索引的方式表示系列的索引。 不同图表类型下的 { a }，{ b }，{ c }，{ d } 含义不一样。 其中变量{ a }, { b }, { c }, { d } 在不同图表类型下代表数据含义为：

            // 折线（区域）图、柱状（条形）图、K线图: { a }（系列名称），{ b }（类目值），{ c }（数值）, { d }（无）

            // 散点图（气泡）图: { a }（系列名称），{ b }（数据名称），{ c }（数值数组）, { d }（无）

            // 地图: { a }（系列名称），{ b }（区域名称），{ c }（合并数值）, { d }（无）

            // 饼图、仪表盘、漏斗图: { a }（系列名称），{ b }（数据项名称），{ c }（数值）, { d }（百分比）

        },
        visualMap: {
            show: false,
        },
    };

    let series = {
        type: "map",//
        map: "china",
        colorBy: "series",//按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色
        zoom: 1.3,//当前视角的缩放比例
        top: 80,//组件离容器上侧的距离
        label: {
            show: true,
            color: "#333",
            fontSize: 10,
        },
    }

    //三，通过echarts的init方法实例化一个echarts对象myChart，并，保存在data变量中
    nowDefiniteMap = echarts.init((mapDom as HTMLElement))
    totalDefiniteMap = echarts.init((mapDom2 as HTMLElement))
    newlyLineMap = echarts.init(newlyLineDom as HTMLElement)
    confirmLineMap = echarts.init(confirmLineDom as HTMLElement)
    healLineMap = echarts.init(healLineDom as HTMLElement)
    echarts.registerMap("china", (chinaJson as any))

    nowDefiniteMap.showLoading()
    //totalDefiniteMap.showLoading()

    axios("/api/ug/api/wuhan/app/data/list-total?t=330415245809").then(res => {
        data.areaTree = res.data.data.areaTree;
        data.chinaDayList = res.data.data.chinaDayList;
        data.chinaTotal = res.data.data.chinaTotal;
        data.china = data.areaTree.find((v) => v.id === "0").children;
        data.hbData = data.china.find((v) => v.id === "420000");

        let mapData: any[] = [],
            mapData2: any[] = [],
            lineData: {
                date: any[],
                confirm: any[],
                suspect: any[],
                heal: any[],
                dead: any[],
                storeConfirm: any[],
                store: any[],
            } = {
                date: [],
                confirm: [],
                suspect: [],
                heal: [],
                dead: [],
                storeConfirm: [],
                store: [],
            };

        data.china.map((v: any) => {
            mapData.push({
                name: v.name,
                value: v.total.confirm - v.total.dead - v.total.heal || 0
            })
            mapData2.push({
                name: v.name,
                value: v.total.confirm,
            })
        })

        //获取折线图数据
        data.chinaDayList.map((v: any) => {
            lineData.date.push(v.date);
            lineData.confirm.push(v.total.confirm);
            lineData.suspect.push(v.total.suspect);
            lineData.heal.push(v.total.heal);
            lineData.dead.push(v.total.dead);
            lineData.store.push(v.total.confirm - v.total.dead - v.total.heal);
            lineData.storeConfirm.push(v.total.confirm);
        });

        let optionLine = {
            title: {
                text: "全国疫情新增趋势",
                subtext: "单击可查看具体数据",
            },
            tooltip: {
                trigger: "axis",//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                // formatter: "现有确诊病例<br/>{b}: {c} ",
            },
            grid: {
                top: "18%",
                left: "18%", //原来是10%，修改为20%
                right: "2%",
            },
            xAxis: [
                {
                    type: "category",
                    // axisTick: {
                    //     alignWithLabel: true,
                    // },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: "#a9a9a9",
                        },
                    },
                    axisPointer: {
                        label: {
                            formatter: function (p: any) {
                                return `确诊： ${p.seriesData[0].data}`;
                            },
                        },
                    },
                    data: lineData.date,
                },
                {
                    show: false,
                    type: "category",
                    // axisTick: {
                    //     alignWithLabel: true,
                    // },
                    axisLine: {
                        onZero: false,
                        color: '#a9a9a9'
                    },
                    axisPointer: {
                        label: {
                            formatter: function (p: any) {
                                return `疑似： ${p.seriesData[0].data}`;
                            },
                        },
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                    //  axisLine: {
                    //   // onZero: false,
                    //   interval: 0,//使x轴文字显示全
                    //   //  rotate:40
                    //   // lineStyle: {
                    //   //   color: colors[1],
                    //   // },
                    // },
                },
            ],
        };

        nowDefiniteMap.hideLoading()
        //totalDefiniteMap.hideLoading()

        //四，执行myChart的setOption方法去画图，当然至于配置项，我们要提前配置好
        nowDefiniteMap.setOption({
            ...optionMap1,
            series: {
                ...series,
                data: mapData
            }
        })

        totalDefiniteMap.setOption({
            ...optionMap2,
            series: {
                ...series,
                data: mapData2
            }
        })

        newlyLineMap.setOption({
            ...optionLine,
            series: [
                {
                    type: "line",//
                    xAxisIndex: 0,
                    itemStyle: {
                        color: "#e44a3d",
                        lineStyle: {
                            color: "#e44a3d",
                        },
                    },
                    data: lineData.confirm,
                },
                {
                    type: "line",
                    xAxisIndex: 1,

                    itemStyle: {
                        color: "#a31d13",
                        lineStyle: {
                            color: "#a31d13",
                        },
                    },
                    // smooth: true,
                    // emphasis: {
                    //   focus: 'series'
                    // },
                    data: lineData.suspect,
                },
            ],
        })

        optionLine.title.text = "全国疫情确诊数据"

        confirmLineMap.setOption({
            ...optionLine,
            series: [
                {
                    type: "line",
                    xAxisIndex: 0,
                    itemStyle: {
                        color: "#a31d13",
                        lineStyle: {
                            color: "#a31d13",
                        },
                    },
                    data: lineData.storeConfirm,
                },
                {
                    type: "line",
                    xAxisIndex: 1,
                    itemStyle: {
                        color: "#ffa352",
                            lineStyle: {
                                color: "#ffa352",
                            },
                    },
                    data: lineData.store,
                },
            ],
        })

        optionLine.title.text = "全国疫情治愈数据"
        healLineMap.setOption({
            ...optionLine,
        series: [
            {
                type: "line",
                xAxisIndex: 0,
                data: lineData.heal,
            },
            {
                type: "line",
                xAxisIndex: 1,
                // smooth: true,
                // emphasis: {
                //   focus: 'series'
                // },
                data: lineData.dead,
            },
        ],
        })

        //五,执行echarts自带的resize方法，即可做到让echarts图表自适应
        nowDefiniteMap.resize();
        totalDefiniteMap.resize();
        newlyLineMap.resize();
        confirmLineMap.resize();
        healLineMap.resize();
    })
}

export {
    InteData,
    initDataFun
}